<template>
    <div v-if="readyShow">
        <h1 style="font-size:25px ;">{{name}}</h1>
        <el-button class="vote" type="primary" style="float: right;margin-right: 5%;margin-top: 5%;position: relative"
                   disabled>{{state}}
        </el-button>
        <br/>
        <span>表决类型： </span>
        <span>{{type}}</span><br/>
        <span>债权人委员会主席： </span>
        <span>{{chinaMan}}</span><br/>
        <span>直接指定成员： </span>
        <span>{{directMembers}}</span><br/>
        <span>管理人推荐候选成员： </span>
        <ul style="list-style:none;line-height:25px;">
            <li v-for="item in candidateMembers">{{item.name}}</li>
        </ul>
        <br/>
        <span>相关文件：</span><br/>
        <el-table
                @cell-click="downloadFile"
                :data="fileList" width="100%">
            <el-table-column
                    prop="name"
                    label="文件">
            </el-table-column>
        </el-table>

        <span>已选择债权人： </span>
        <ul style="list-style:none">
            <li v-for="form in committeeResult">{{form.name}}</li>
        </ul>

        <div v-if="canVote === 1">
            <el-autocomplete
                    popper-class="my-autocomplete"
                    v-model="peopleName"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect"
            >
                <i
                        class="el-button"
                        slot="suffix"
                        type="primary" plain
                        @click="handleIconClick">选择
                </i>
                <template slot-scope="{ item }">
                    <div class="name">{{ item.value }}</div>
                    <span class="addr">{{ item.address }}</span>
                </template>
            </el-autocomplete>
        </div>

        <div style="font-size:10px;color: red;margin-top: 3%">
            <i class="el-icon-info" style="font-size:10px;color: black"></i> 您可以投票的人数为：{{selectNum}}人
        </div>
        <br/>

        <el-tag
                :disable-transitions="false"
                @close="handleClose(tag)"
                v-for="tag in nameList"
                :key="tag.id"
                closable>
            {{tag.value}}
        </el-tag>
        <br/>
        <div style="text-align: center;width: 100%; margin-top: 3%" v-if="canVote === 1">
            <el-button type="primary" style="width: 40%" @click="showCommitteeDialog" v-if="canVote == 1">提交</el-button>
            <el-button type="primary" style="width: 40%" @click="showCommitteeDialog" disabled v-if="canVote == 0">提交
            </el-button>
        </div>
        <div style="width: 100%; text-align: center;margin-top: 5%" v-if="certificateButton">
            <el-button @click="toCertificate" type="primary" style="width: 80%">查看表决存证</el-button>
        </div>

        <el-table
                v-if="committeeResultList"
                :data="groupList"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="targetType"
                    label="债权人"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="peopleSum"
                    label="总签到人数"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="peopleFavor"
                    label="赞成人数"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="peopleRate"
                    label="赞成人数比例"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="amountSum"
                    label="总债权额"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="amountFavor"
                    label="赞成债权额"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="amountRate"
                    label="赞成债权额比例"
                    width="120">
            </el-table-column>
        </el-table>

        <div style="margin-top: 5%"></div>
        <div style="font-size: 12px;word-wrap: break-word;">文件下载地址 :
            <span>{{compressFileUrl}}</span>
        </div>

        <el-dialog
                title="提示"
                :visible.sync="submitCommitteeVisible"
                width="90%">
            <span>当前是第{{voteTimes +1}}次提交， 您总共可以提交2次</span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="submitCommitteeVisible = false" style="margin-right: 5%">取 消</el-button>
            <el-button type="primary" @click="submitCommittee" style="margin-left: 5%">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import util from 'assets/js/util.js'
    import conf from 'assets/js/conf.js'

    export default {
        data() {
            return {
                restaurants: [],
                state1: '',
                people: {},
                peopleName: "",
                fileList: [],
                directMembers: '',
                nameList: [],
                submitCommitteeVisible: false,
                candidateMembers: {
                    name: '',
                    id: ''
                },
                committeeResult: {
                    name: '',
                    id: ''
                },
                chinaMan: '',
                state: '',
                compressFileUrl: '',
                groupList: [],
                name: '',
                type: '',
                index: -1,
                voteTimes: 0,
                canVote: 0,
                bropState: 0,
                certificateButton: false,
                committeeResultList: false,
                centerDialogVisible: false,
                readyShow: false
            }
        },
        mounted: function () {

            const _self = this;
            util.ajax({
                url: `/vote/info`,
                params: {voteId: util.getUrlParam(document.location.href, 'voteId')},
                success: function (data) {
                    if (data.data.state === 3) {
                        data.data.voteCommitteeResultList.forEach(_group => _self.groupList.push({
                            groupName: _group.groupName,
                            targetType: _group.targetType,
                            peopleFavor: _group.peopleFavor,
                            peopleSum: _group.peopleSum,
                            amountSum: _group.amountSum,
                            amountFavor: _group.amountFavor,
                            peopleRate: _group.peopleRate,
                            amountRate: _group.amountRate,
                        }));
                        _self.committeeResultList = true;
                    }
                    _self.committeeResult = data.data.committeeResult || '';
                    _self.id = data.data.id;
                    _self.name = data.data.name;
                    _self.chinaMan = data.data.chinaMan;
                    _self.materialFileids = data.data.materialFileids;
                    _self.state = _self.matchStateText(data.data.state);
                    _self.compressFileUrl = data.data.compressFileUrl;
                    _self.voteTimes = data.data.voteTimes;
                    _self.canVote = data.data.canVote;
                    _self.directMembers = data.data.directMembers || '';
                    _self.candidateMembers = data.data.candidateMembers || '';
                    _self.type = _self.matchTypeText(data.data.type);
                    _self.selectNum = data.data.selectNum;
                    _self.bropState = data.data.bropState;

                    if (data.data.committeeResult !== "")
                        data.data.committeeResult.forEach(_people => {
                            _self.nameList.push({
                                id: _people.id,
                                value: _people.name,
                            })
                        });
                    if (_self.bropState !== 0 && _self.voteTimes > 0) {
                        _self.certificateButton = true;
                    }

                    util.ajax({
                        url: '/file/getFileList',
                        params: {eids: _self.materialFileids},
                        success: function (data) {
                            data.data.forEach(_file => _self.fileList.push({
                                id: _file.id,
                                name: _file.name,
                            }));
                            _self.readyShow = true;
                        },
                    });
                },
            });

            util.ajax({
                url: `/vote/searchCreditor`,
                params: {currentPage: 1, pageSize: 20000},
                success: function (data) {
                    data.data.content.forEach(_people => {
                        _self.restaurants.push({
                            id: _people.id,
                            value: _people.name,
                        })
                    })
                }
            });
            if (_self.canVote === 0) {
                alert('此表决您没有投票权！')
            }
        },
        methods: {

            downloadFile: function (row, column, cell, event) {
                window.open(conf.baseUrl + '/file/get/' + row.id + '?type=1')
            },
            toCertificate: function () {
                window.location.href = '../meeting/certificate-detail.html?' + 'voteId=' + this.voteId;
            },
            handleSelect(item) {
                this.people = item;
            },
            handleClose(tag) {
                this.nameList.splice(this.nameList.indexOf(tag), 1);
            },
            handleIconClick(ev) {

                const _self = this;
                let isSame = false;
                this.nameList.forEach(_people => {
                    if (_self.people.value === _people.value) {
                        isSame = true;
                    }
                });
                if (!isSame) {
                    this.nameList.push(this.people);
                }
                this.peopleName = "";
            },
            querySearch(queryString, cb) {
                let restaurants = this.restaurants;
                let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                results.slice(0, 10);
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.indexOf(queryString) >= 0);
                };
            },
            deleteRow() {
                this.fileList.splice(this.index, 1);
                this.centerDialogVisible = false
            },
            showDialog: function (index, rows) {
                this.index = index;
                this.centerDialogVisible = true
            },
            showCommitteeDialog: function () {
                if (this.nameList.length === 0) {
                    alert("请选择债委会成员");
                    return;
                }
                if (this.voteTimes <= 1)
                    this.submitCommitteeVisible = true;
                else
                    alert("您的投票次数已用完");
            },

            submitCommittee: function () {
                let result = "";
                this.nameList.forEach(_people => {
                    result += _people.id + ",";
                });
                util.ajax({
                    url: `/vote/vote`,
                    params: {
                        voteId: util.getUrlParam(document.location.href, 'voteId'),
                        result: result.substring(0, result.length - 1)
                    },
                    success: function (data) {
                        if (data.status == 200) {
                            location.reload();

                            if (this.nameList.length > this.selectNum) {
                                alert('您已超出投票人数！');
                                return;
                            }
                        }
                    }
                });

                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                    loading.close();
                }, 1000);
            },
            matchStateText: function (type) {
                let typeText = '';
                switch (type) {
                    case 0:
                        typeText = '预选举';
                        break;
                    case 1:
                        typeText = '选举中';
                        break;
                    case 2:
                        typeText = '线上投票关闭中';
                        break;
                    case 3:
                        typeText = '已结束';
                        break;
                    default:
                        break
                }
                return typeText
            },
            matchTypeText: function (type) {
                let typeText = '';
                switch (type) {
                    case 99:
                        typeText = '其他';
                        break;
                    case 1:
                        typeText = '继续或者停止债务人的营业';
                        break;
                    case 2:
                        typeText = '债务人重整计划';
                        break;
                    case 3:
                        typeText = '债务人财产的管理方案';
                        break;
                    case 4:
                        typeText = '破产财产的变价方案';
                        break;
                    case 5:
                        typeText = '和解协议';
                        break;
                    case 6:
                        typeText = '破产财产的分配方案';
                        break;
                    case 0:
                        typeText = '债权人委员会选举';
                        break;
                    default:
                        break
                }
                return typeText
            },
            matchCreditTypeText: function (type) {
                let typeText = '';
                switch (type) {
                    case 1:
                        typeText = '职工债权';
                        break;
                    case 2:
                        typeText = '普通债权';
                        break;
                    case 3:
                        typeText = '税收债权';
                        break;
                    case 4:
                        typeText = '优先债权';
                        break;
                    default:
                        break
                }
                return typeText
            },
        },
    }
</script>

<style scoped>
    h1 {
        margin: 10px auto;
    }

    /*.my-autocomplete {

    li {
        line-height: normal;
        padding: 7px;

    .name {
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .addr {
        font-size: 12px;
        color: #b4b4b4;
    }

    .highlighted .addr {
        color: #ddd;
    }

     }
    }*/

    span {
        line-height: 35px;
    }

</style>
